<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';

  // 表单
  const editForm = useForm({
    state: {
      name: '',
      type: '',
      status: '',
    },
    rules: {
      name: {
        required: true,
        message: '请输入名称',
      },
      type: {
        required: true,
        message: '请选择类型',
      },
      status: {
        required: true,
        message: '请选择状态',
      },
    },
  });

  // 弹窗
  const editModal = useModeModalBinder({
    modes: ['edit', 'add'] as const,
    renderTitle(mode) {
      return mode === 'add' ? '新增' : '编辑';
    },
    onShow(mode, data) {
      if (mode === 'add') {
        editForm.resetFields();
      } else {
        editForm.setFieldsValue(data);
      }
    },
    async onOkClick(mode) {
      await editForm.validate();
      const data = editForm.state;

      // 这里替换为实际的API调用
      if (mode === 'add') {
        // return addApi(data);
      } else {
        // return editApi(data);
      }
    },
  });
</script>

<template>
  <a-modal v-bind="editModal.bindProps" width="500px">
    <a-form v-bind="editForm.bindProps" layout="vertical">
      <a-form-item field="name" label="名称">
        <a-input v-model="editForm.state.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item field="type" label="类型">
        <a-select v-model="editForm.state.type" placeholder="请选择类型">
          <a-option value="1">类型1</a-option>
          <a-option value="2">类型2</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="status" label="状态">
        <a-select v-model="editForm.state.status" placeholder="请选择状态">
          <a-option value="1">启用</a-option>
          <a-option value="0">禁用</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
